<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>发布文章</title>
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <link rel="stylesheet" href="css/main.css">
    <!--引入副本编辑器-->
    <link href="https://cdn.staticfile.org/wangeditor5/5.1.23/css/style.min.css" rel="stylesheet">
    <style>

    </style>
</head>
<!--只修改mian标签内容-->
<!--这里是发布文章页面-->
<!--姓名：    王荣       -->
<body>
<div id="app">
    <el-container>
        <el-header>不动</el-header>
        <el-container>
            <el-aside width="200px">
                <el-menu @select="handleSelect" active-text-color="orange" default-active="5-2">
                    <img src="imgs/icon.png" style="margin-top: 10px" width="150px">
                    <el-divider></el-divider>
                    <el-menu-item index="1"><i class="el-icon-s-platform">数据统计分析</i></el-menu-item>
                    <el-submenu index="2">
                        <template slot="title">
                            <i class="el-icon-s-custom">管理员账号</i>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="2-1">管理员列表</el-menu-item>
                            <el-menu-item index="2-2">添加管理员</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-menu-item index="3"><i class="el-icon-user-solid"> 用户账号</i></el-menu-item>
                    <el-submenu index="4">
                        <template slot="title">
                            <i class="el-icon-video-camera"> 轮播图管理</i>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="4-1">轮播图列表</el-menu-item>
                            <el-menu-item index="4-2">添加轮播图</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-submenu index="5">
                        <template slot="title">
                            <i class="el-icon-s-promotion"> 文章管理</i>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="5-1">文章列表</el-menu-item>
                            <el-menu-item index="5-2">发布文章</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-submenu index="6">
                        <template slot="title">
                            <i class="el-icon-chat-line-round"> 评论管理</i>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="6-1">管理员评论</el-menu-item>
                            <el-menu-item index="6-2">用户评论</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-menu-item index="7"><i class="el-icon-setting"> 个人设置</i></el-menu-item>
                </el-menu>
            </el-aside>

            <!--只修改mian标签内容-->
            <el-main style="width: 100%;margin: 0 auto">
                <el-card>
                <el-row gutter="10">
                    <el-col span="20">

                            <el-form label-width="80px" >
                                <el-form-item label="文章标题">
                                    <el-input v-model="c.title" placeholder="请输入文章标题"></el-input>
                                </el-form-item>
                                <el-form-item label="文章分类">
                                    <el-radio-group v-model="c.type">
                                        <el-radio-button label="1">小说</el-radio-button>
                                        <el-radio-button label="2">小世界视频</el-radio-button>
                                        <el-radio-button label="3">学习资料</el-radio-button>
                                        <el-radio-button label="4">VIP资料</el-radio-button>
                                        <el-radio-button label="5">爱情片</el-radio-button>
                                        <el-radio-button label="6">java</el-radio-button>
                                        <el-radio-button label="7">ui</el-radio-button>
                                        <el-radio-button label="8">数据库</el-radio-button>
                                    </el-radio-group>
                                </el-form-item>
                                <el-form-item label="数据分类">
                                    <el-select placeholder="选择" v-model="c.categoryId">
                                        <el-option label="java" value="1"></el-option>
                                        <el-option label="c++" value="2"></el-option>
                                        <el-option label="成人小说" value="3"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="封面">
                                    <!--************上传组件开始*************-->
                                    <el-upload  style="float: left"
                                                action="https://jsonplaceholder.typicode.com/posts/"
                                                list-type="picture-card"
                                                :on-preview="handlePictureCardPreview"
                                                :on-remove="handleRemove">
                                        <i class="el-icon-plus"></i>
                                    </el-upload>
                                    <el-dialog :visible.sync="dialogVisible">
                                        <img width="100%" :src="dialogImageUrl" alt="">
                                    </el-dialog>
                                    <!--************上传组件结束*************-->
                                </el-form-item>
                                <el-form-item>

                                    <div style="border: 1px solid #ccc">
                                        <div id="toolbar-container" style="border-bottom: 1px solid #ccc;"></div>
                                        <div id="editor-container" style="height: 300px;"></div>
                                    </div>

                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary">发布内容</el-button>
                                </el-form-item>
                            </el-form>

                    </el-col>
                </el-row>
                </el-card>

            </el-main>

        </el-container>
    </el-container>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<!--引入富文本编辑器框架js文件-->
<script src="https://cdn.staticfile.org/wangeditor5/5.1.23/index.min.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                dialogImageUrl: '',
                dialogVisible: false,
                c:{title:"",type:"1",categoryId:""}
            }
        },
        methods: {
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            handleSelect(key, keyPath) {
                if (key == 1) {
                    location.href = "personal.html";
                } else {
                    location.href = "content-management.html";
                }
            }
        }
    })

    /**********富文本编辑器相关js开始***********/
    const { createEditor, createToolbar } = window.wangEditor
    const editorConfig = {
        placeholder: '请填写详情...',
        onChange(editor) {
            const html = editor.getHtml()
            console.log('editor content', html)
        }
    }
    const editor = createEditor({
        selector: '#editor-container',
        html: '<p><br></p>',
        config: editorConfig,
        mode: 'simple',
    })
    const toolbarConfig = {}
    const toolbar = createToolbar({
        editor,
        selector: '#toolbar-container',
        config: toolbarConfig,
        mode: 'simple',
    })
    /**********富文本编辑器相关js结束***********/
</script>
</html>
